import React from 'react'; // 凡是使用jsx语法的地方，都必须引入React;
import { Route, Switch, Redirect  } from 'react-router-dom'
/**
 * 路由表的封装 
 *   配置文件 里面放所有写好的路由
 */
const RouterView = (props) => {
  // console.log(props, 'props')
  // 1. 拿到刚才的配置文件呢，2. 过滤配置文件 3，渲染配置文件
  const renderCom = props.routes.filter(val => val.component);
  const redirectCom = props.routes.filter(val => val.redirect);
  // console.log(renderCom, redirectCom)
  return (
    <Switch>
      {
        renderCom.map((item, index) => {
          // 渲染组件两种形式 component-优先级更高  render  
          return <Route key={index} path={item.path} render={(props) => {
              return <item.component routes={item.children}></item.component> 
          }} />
        })
      }
      {
        redirectCom.map((item, index) => {
          return <Redirect key={index} from='/' to={item.redirect}/>
        })
      }
    </Switch>
  )
}

export default RouterView;

